<template>
  <!--课程大类展示页-->
  <div>
    <!--顶栏-->
    <div id="header-type" style="position: sticky;background-color:white;top: 0px;">
      <!--菜单栏，显示该课程大类名称及下属的课程分类名称，点击查看下属课程分类的课程信息-->
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
               @select="handleSelect" text-color="#99CBFD" active-text-color="#1989FA"
               style="margin-left:200px;width:1400px;display: flex;">
        <a style="margin: 13px 50px 0 140px;font-size: 24px; font-weight: bold;text-align:center;color:#333333; text-decoration: none;">{{
            this.fathertype.fathertypeName
          }}</a>
        <a style="margin:18px 0;color: #E6E6E6">|</a>
        <el-menu-item index="0" style="margin: 0;padding: 0">
          <router-link :to="'/courseTypeView/'+this.fathertypeId"
                       style="padding:20px 30px;font-size: 16px;text-decoration: none;">全部
          </router-link>
        </el-menu-item>
        <el-menu-item v-for="(item,index) in this.coursetypeList" :key="index"
                      :offset="index > 0 ? 2 : 0" :index="item.coursetypeId.toString()" style="margin:0;padding:0">
          <router-link :to="'/courseTypeView/courseListView/'+item.fathertypeId+'/'+item.coursetypeId"
                       style="padding:20px 25px;font-size: 16px;text-decoration: none;">{{ item.coursetypeName }}
          </router-link>
        </el-menu-item>
      </el-menu>
    </div>
    <el-main>
      <!--$route.fullPath解决子页面刷新问题
          嵌入课程分类展示页的路由视图
      -->
      <router-view :key="$route.fullPath"/>
      <div v-show="$route.meta['showFooter']"
           style="margin:0px auto;width: 1200px;display: flex;flex-direction: column;">
          <p style="margin: 0 0 0 10px;font-size: 24px">全部课程</p>
          <div style="width: 100%;min-height: 750px">
            <el-row>
              <el-col style="width: 238px;height:262px;margin: 10px auto 28px;padding: 10px"
                      v-for="item in courseList" :key="item.courseId"
                      :offset="item.courseId > 0 ? 2 : 0">
                <a @click="on_courseCard(item.courseId)" style="text-decoration: none;cursor:pointer;">
                  <el-card :body-style="{ padding: '0px'}" style="border-radius: 12px">
                    <img :src="`http://localhost:8089/upload/${item.cover}`"
                         class="k-image"/>
                    <div style="height: 126px;padding: 10px 12px;position: relative;">
                      <p style="font-weight: bold;color:#333333;margin: 0">{{ item.courseName }}</p>
                      <p style="color:#666666;margin: 0">{{ item.schoolName }}</p>
                      <p style="color: #999999;margin: 0">{{ item.userName }}</p><!--添加教师团队-->
                      <p style="margin: 40px 0 0;float: right;color: #999999">{{ item.attendNum }}人参加</p>
                    </div>
                  </el-card>
                </a>
              </el-col>
            </el-row>
            <el-empty v-if="courseList.length===0" description="该板块没有课程哦，看看其他板块吧"></el-empty>
          </div>
          <el-pagination
              @size-change="handleSizechange"
              @current-change="getPageFatherType"
              :current-page="currentPage"
              :page-sizes="[10,15,20]"
              :page-size="pageSize"
              layout="total,sizes,prev,pager,next,jumper"
              :total="total"
              style="text-align: center">
          </el-pagination>
        </div>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "CourseTypeView",
  data() {
    return {
      activeIndex: '0',
      fathertypeId: '',
      fathertype: '',
      coursetypeList: [],
      courseList: [],
      currentPage: 1,
      pageSize: 10,
      total: 10,
    }
  },
  methods: {
    /*
    * 动态控制顶栏的z-index值，以实现本页面顶栏在移动过程中，较流畅的盖过主页面顶栏，
    * 并保证在页面最顶部时本页面菜单栏不会盖过主页面菜单栏的下拉框
    */
    handleScroll() {
      // 页面滑动的距离
      let scrollTop = document.documentElement.scrollTop
      // 当页面滑动的距离大于~px时元素显示，否则不显示
      if (scrollTop >= 20) {
        document.getElementById("header-type").style.zIndex = "9999";
      } else {
        document.getElementById("header-type").style.zIndex = "2000";
      }
    },
    //查询课程大类信息
    getFathertypeById(fathertypeId) {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/fathertype/selectFathertypeById/${fathertypeId}`
      }).then(res => {
        this.fathertype = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    // 根据课程大类Id查询属下的课程分类信息
    getCousetypeByFatherId(fathertypeId) {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/coursetype/selectCoursetypeByFathertypeId/${fathertypeId}`
      }).then(res => {
        this.coursetypeList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    // 查询课程大类下的课程信息
    // getCourseByFatherType(fathertypeId) {
    //   this.$axios({
    //     method: 'get',
    //     url: `http://localhost:8089/course/selectCourseByFathertypeId/${parseInt(fathertypeId)}`
    //   }).then(res => {
    //     this.courseList = res.data.dataobject;
    //   }).catch(err => console.log(err));
    // },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 点击课程进入课程展示页
    on_courseCard(courseId) {
      console.log(courseId);
      window.open(this.$router.resolve({path: `/courseView/${courseId}`}).href, '_blank');
    },
    handleSizechange(size) {
      this.pageSize = size;
      this.getPageFatherType(1);
    },
    getPageFatherType(current = 1) {
      this.currentPage = current;
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/course/getPageByFathertypeId/${this.currentPage}/${this.pageSize}/${this.fathertypeId}`,
      }).then(res => {
        this.total = res.data.dataobject.total;
        this.courseList = res.data.dataobject.pageList;
      }).catch(err => console.log(err));
    },
  },
  created() {
    this.fathertypeId = this.$route.params.fathertypeId;
    // 若地址栏不存在课程分类Id，则菜单栏应显示在首页，否则显示在指定课程类型页
    if (this.$route.params.coursetypeId === undefined) {
      this.activeIndex = '0'
    } else {
      this.activeIndex = this.$route.params.coursetypeId
    }
    this.getFathertypeById(this.fathertypeId)
    this.getCousetypeByFatherId(this.fathertypeId)
    this.getPageFatherType()
    // this.getCourseByFatherType(this.fathertypeId);
  },
  mounted() {
    //加入滚动监控
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style scoped>
/*/deep/.el-tooltip__trigger {*/
/*  border-radius: 20px;*/
/*  border: unset !important;*/
/*}*/
/*/deep/.el-menu-item:hover{*/
/*  border-radius: 20px;*/
/*  background: #409EFF !important;*/
/*  outline: 0 !important;*/
/*  color: #fff !important;*/
/*}*/
/*/deep/.el-menu-item.is-active {*/
/*  border-radius: 20px;*/
/*  color: #fff !important;*/
/*  background: #409EFF !important;*/
/*}*/
</style>